<template>
  <div>
    <Header/>
    <div class="container">
      <div class="row">
        <div class="col-xl-12">
          <table class="table" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
              <th>ID</th>
              <th>商品名</th>
              <th>商品英文名</th>
            </tr>
            </thead>
            <tbody v-for="(item, index) in allredwine" :key="index">
            <tr>
              <td>{{ item.id }}</td>
              <router-link :to="{path: `/redwine/${item.id}`}">
                <td>{{ item.title }}</td>
              </router-link>
              <td>http://commodity.yyeport.com/redwine/{{ item.id }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRedWineList } from '../../api/api'
import Header from './header'

export default {
  name: 'redwine',
  components: {
    Header
  },
  data () {
    return {
      allredwine: null
    }
  },
  methods: {
    getAllRedWine () {
      getRedWineList().then((response) => {
        console.log(response.data)
        this.allredwine = response.data
      })
    }
  },
  created () {
    this.getAllRedWine()
  }
}
</script>

<style scoped>

</style>
